<template>
  <EChart
    class="edgex-pie-chart"
    :option="option"
    height="400px"
    v-if="option"
    @chartClick="chartClick"
  />
</template>

<script lang="ts">
import { infoEdgex } from "@/controller/Edgex";
import { defineComponent, onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
import EChart from "./EChart.vue";

export default defineComponent({
  name: "EdgexPieChart",
  components: {
    EChart,
  },
  props: {},
  setup() {
    const option = ref();
    onBeforeMount(async () => {
      const info = await infoEdgex();
      const data = info.map((value) => {
        return {
          id: value.edgex_id,
          value: value.device_amount,
          name: value.edgex_name,
          prefix: value.prefix,
        };
      });
      option.value = {
        title: {
          text: "Edgex服务设备数",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Edgex服务设备数",
            type: "pie",
            radius: "50%",
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    });
    const router = useRouter();
    const chartClick = (e: {
      data: {
        id: number;
        value: number;
        name: string;
        prefix: string;
      };
    }) => {
      router.push({
        name: "EdgexDetail",
        params: {
          prefix: e.data.prefix,
        },
        query: {
          id: e.data.id,
        },
      });
    };
    return {
      option,
      chartClick,
    };
  },
});
</script>

<style scoped lang="scss">
.example-pie-chart {
}
</style>
